<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{name}}</h3>
			<button @click="counter++">++</button>
			<h1>{{counter}}</h1>
			<button @click="des">销毁</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				/* beforeCreate:function(){
					
				} */
				data: {
					name: '张三',
					counter: 0,
				},
				methods: {
					show() {
						console.log("博为峰");
					},
					des() {
						this.$destroy();
					}
				},
				//vue对象创建之前
				beforeCreate() {
					//不能访问data中的数据,不能调用methods中的方法
					console.log("beforeCreate");
					console.dir(this);
					// console.log(this.name);
					// this.show();
					Vue.prototype.bwf = {};
				},
				//vue对象创建后
				created() {
					//可以访问data中的数据,调用methods中的方法（请求）
					console.log("created");
					console.dir(this);
					console.log(this.name);
				},
				//挂载之前
				beforeMount() {
					//页面上还是未编译的DOM,对DOM的操作,不生效
					document.querySelector('div').innerHTML = '<h1>博为峰</h1>';
					console.log("beforeMount");
				},
				//挂载
				mounted() {
					console.log("mounted");
				},
				//更新前
				beforeUpdate() {
					console.log(this.counter);
					console.log("beforeUpdate");
				},
				//更新后
				updated() {
					console.log("updated");
				},
				//销毁前
				beforeDestroy() {
					console.log("beforeDestroy");
				},
				//销毁后
				destroyed() {
					console.log("destroyed");
					console.log(this);
					console.log(this.name);
				}

			})
		</script>
	</body>
</html>
